<template>
  <div class="flex">
    <div class="item_detail flex_column">
      <div class="flex DINAlternate" style="height: 15px">
        <div class="flex" v-if="match.event_type == 'live'" style="margin-right: 8px">
          <!-- <div style="width: 10px; height: 10px"></div> -->
          <div class="now_time">{{ match.live_time_str }}</div>
        </div>
        <div class="time_year">{{ timedata.timePart }}</div>
        <div class="time" v-if="match.event_type != 'live'">{{ timedata.datePart }}</div>
      </div>
      <div class="flex" style="margin-top: 4px; justify-content: space-between">
        <div class="flex_column name AlibabaPuHuiTi_2_65_">
          <div>{{ match.home_name }}</div>
          <div style="margin-top: 1px">{{ match.away_name }}</div>
        </div>
        <div class="flex_column socre DINAlternate" style="margin-right: 16px">
          <div>{{ scoredata.score1 }}</div>
          <div style="margin-top: 1px">{{ scoredata.score2 }}</div>
        </div>
      </div>
    </div>

    <div class="table_name">
      <div>{{languageJson.home.full}}</div>
      <div style="margin-top: 4px">{{languageJson.home.half}}</div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const languageJson = inject('languageJson')
const props = defineProps({
  match: Object,
})

const timedata = computed(() => {
  let a = {
    datePart: '',
    timePart: '',
  }
  let dateRegex = /^(\d{4}-\d{2}-\d{2})/
  a.datePart = props.match.match_time.match(dateRegex)[0]
  let timeRegex = /(\d{2}:\d{2}:\d{2})$/
  a.timePart = props.match.match_time.match(timeRegex)[0]
  return a
})

const scoredata = computed(() => {
  let a = {
    score1: '0',
    score2: '0',
  }
  if (props.match.score != '') {
    let parts = props.match.score.split(':')
    a.score1 = parts[0]
    a.score2 = parts[1]
  }
  return a
})
</script>

<style lang="scss" scoped>
.item_detail{
  flex: 1;
}
.now_time {
  font-size: 12px;
  font-weight: bold;
  color: #ff5f58;
}
.time_year {
  // font-family: DINAlternate;
  font-size: 12px;
  font-weight: bold;
  color: #999;
}
.time {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  color: #999;
  margin-left: 12px;
}
.name {
  font-size: 12px;
  font-weight: 500;
  color: #000;
}
.socre {
  font-size: 12px;
  font-weight: bold;
  color: #000;

  div {
    width: 24px;
    height: 16px;
    background-color: rgba(254, 172, 46, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.table_name{
  display: flex;
  flex-direction: column;
  margin-right: 12px;

  div{
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    font-weight: bold;
  }
}
</style>
